<template>
  <div class="shot">
    <el-table :data="tableData" style="width: 100%">
      <!-- <el-table-column type="index" align="center" label="序号" width="70"> </el-table-column> -->
      <el-table-column prop="stQueryInput" label="输入样例">
        <template slot-scope="{ row }">
          <el-input v-model="row.stQueryInput" placeholder="请输入内容" required></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="stExpectedOutput" label="输出样例">
        <template slot-scope="{ row }">
          <el-input v-model="row.stExpectedOutput" placeholder="请输入内容"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="120">
        <template slot-scope="scope">
          <span class="tabBtn" @click="saveShot(scope.row)">保存</span>
          <span class="tabBtn" @click="deleteRow(scope)">删除</span>
        </template>
      </el-table-column>
      <template slot="append">
        <el-button class="addRow" @click="addRow"><i class="el-icon-plus"></i>新增</el-button>
      </template>
    </el-table>
  </div>
</template>
<script>
import { shotAdd, shotList, shotUpdate, shotDelete } from "@/api/tools.js"
export default {
  components: {},
  props: {
    tkName: {
      type: String,
      default: "",
    },
    toolName: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      tableData: [],
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    getList() {
      shotList({ name: this.toolName || this.tkName })
        .then(result => {
          console.log(result)
          this.tableData = result.data || []
        })
        .catch(err => {
          console.log(err)
        })
    },
    saveShot(row) {
      if (!row.stQueryInput) {
        this.$message.error("输入样例不能为空")
        return
      } else if (!row.stExpectedOutput) {
        this.$message.error("输出样例不能为空")
        return
      }
      if (row.id) {
        console.log(this.toolName, this.tkName)
        shotUpdate({ ...row })
          .then(result => {
            console.log(result)
            if (result.code == 200) {
              this.$message.success(result.msg)
              this.getList()
            } else {
              this.$message.error(result.msg)
            }
          })
          .catch(err => {
            console.log(err)
          })
      } else {
        shotAdd({
          stToolsName: this.toolName || this.tkName,
          stQueryInput: row.stQueryInput,
          stExpectedOutput: row.stExpectedOutput,
        })
          .then(result => {
            console.log(result)
            if (result.code == 200) {
              this.$message.success(result.msg)
              // this.getList();
            } else {
              this.$message.error(result.msg)
            }
          })
          .catch(err => {
            console.log(err)
          })
      }
    },
    deleteRow(scope) {
      if (scope.row.id) {
        shotDelete({ id: scope.row.id })
          .then(result => {
            console.log(result)
            if (result.code == 200) {
              this.$message.success(result.msg)
              this.tableData.splice(scope.$index, 1)
              // this.getList();
            } else {
              this.$message.error(result.msg)
            }
          })
          .catch(err => {
            console.log(err)
          })
      } else {
        this.tableData.splice(scope.$index, 1)
      }
    },
    addRow() {
      this.tableData.push({ addRow: true })
    },
    mouseLeave(row, column, cell, event) {
      console.log(row, column, cell, event)
    },
  },
}
</script>
<style lang="scss" scoped>
.shot {
  height: 100%;
  overflow: auto;
  ::v-deep .content {
    overflow: auto;
  }
  .tabBtn {
    margin-right: 10px;
    cursor: pointer;
    &:hover {
      color: #409eff;
    }
  }
  .addRow {
    width: 100%;
  }
}
</style>
